Здравствуйте! Есть ассоциативный массив(вопросы с вариантами ответа):
<?php
$test = [
'Who are you?' => ["Men", "Women", "Choosen_one", "Mutant"],
'What is you name?' => ["Neo", "Morpheus", "Trinity", "Tank"],
'How old are you?' => ['10', '25', '40', '60'],
'Follow the white rabbit?' => ['Yes', 'No', 'Dont_know', 'Maybe'],
'What is you favorite food?' => ['Sweets', 'Cakes', 'Meat', 'Vegetables']
];
//$questions = array_keys($test);
//shuffle($questions);
//foreach ($questions as $value) {
// $answers = $test[$value];
// shuffle($answers);
// echo "<b>{$value}</b><br/>";
// foreach ($answers as $value2) {
// echo "<input type='radio' name='$value' value=$value2 required>{$value2}<br>";
// }
//}
echo (json_encode($test));
Есть выборка средствами jquery/ajax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<style>
#b1, #b2, #b3, #b4 {
background-color: aqua;
border: 1px solid black;
width: auto;
text-align: center;
display: inline-block;
}
#b1:hover, #b2:hover, #b3:hover, #b4:hover {
background-color: yellowgreen;
cursor: pointer
}
</style>
</head>
<body>
<script>
$(function () {
$("#next").click(function () {
// $('#ajax_content').html('');
$.ajax({
url: "index.php", success: function (result) {
var json = $.parseJSON(result);
var array = new Array();
var counterQ = 0;
$.each(json, function (index, value) {
array[counterQ] = index;
counterQ++;
});
var counterA = 0;
$.each(json, function (index, value) {
if (array[counterA] == index) {
$('#ajax_content').text(index);
$('#b1').text(value[0]);
$('#b2').text(value[1]);
$('#b3').text(value[2]);
$('#b4').text(value[3]);
}
alert(counterA++);
});
}
});
});
});
</script>
<b>
<div id="ajax_content"></div>
</b>
<br>
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<br><br>
<button id="next">Load next</button>
</body>
</html>
Собственно вопросы:
1. Как выводить на странице браузера без костыля(alerta) - каждый отдельный вопрос, после ответа на предыдущий, обязательно без перезагрузки страницы? Нужно выводить после выбора ответа и реакции на кнопку LOAD NEXT.
2. И как передать вопросы/ответы построенные в рандомном порядке?(код без AJAX ранее был рабочий - закоментирован)
3. Как сохранять ответы на вопросы? Записывать в массив по нажатию на кнопки?
Читал
http://alljs.ru/articles/timeout/overview#nosleep
но не понял как это реализовать в моем случае.
Если можно, пожалуйста с коментариями - хочу понять всю логику и последовательность действий.
Заранее большое спасибо!
